<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:replace="~{fragments/layout :: head('图书列表')}"></head>
<body>
    <!-- 导航栏 -->
    <nav th:replace="~{fragments/layout :: navbar}"></nav>
    
    <!-- 页面内容 -->
    <div th:replace="~{fragments/layout :: content(~{::main})}">
        <main>
            <h2 class="mb-4">图书列表</h2>
            
            <!-- 分类筛选 -->
            <div class="mb-4">
                <div class="btn-group" role="group">
                    <a class="btn btn-outline-primary" th:href="@{/books/list}">全部</a>
                    <a class="btn btn-outline-primary" th:href="@{/books/list(category='计算机')}">计算机</a>
                    <a class="btn btn-outline-primary" th:href="@{/books/list(category='文学')}">文学</a>
                    <a class="btn btn-outline-primary" th:href="@{/books/list(category='历史')}">历史</a>
                    <a class="btn btn-outline-primary" th:href="@{/books/list(category='科幻')}">科幻</a>
                </div>
            </div>
            
            <!-- 图书列表 -->
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                <div class="col" th:each="book : ${books}">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title" th:text="${book.title}">图书标题</h5>
                            <h6 class="card-subtitle mb-2 text-muted" th:text="${book.author}">作者</h6>
                            <p class="card-text">
                                <span class="badge bg-secondary me-1" th:text="${book.category}">分类</span>
                                <span th:if="${book.publicationYear}" class="badge bg-secondary" th:text="${book.publicationYear}">出版年份</span>
                            </p>
                            <p class="card-text text-truncate" th:text="${book.description}">图书描述...</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <span th:if="${book.availableQuantity > 0}" class="badge bg-success">可借阅</span>
                                    <span th:unless="${book.availableQuantity > 0}" class="badge bg-danger">已借完</span>
                                    <small class="text-muted ms-2" th:text="'库存: ' + ${book.availableQuantity} + '/' + ${book.quantity}">库存: 0/0</small>
                                </div>
                                <a th:href="@{/books/view/{id}(id=${book.id})}" class="btn btn-sm btn-outline-primary">查看详情</a>
                            </div>
                        </div>
                        <!-- 管理员操作 -->
                        <div class="card-footer bg-transparent" sec:authorize="hasRole('ADMIN')">
                            <div class="d-flex justify-content-between">
                                <a th:href="@{/books/admin/edit/{id}(id=${book.id})}" class="btn btn-sm btn-outline-secondary">
                                    <i class="fas fa-edit"></i> 编辑
                                </a>
                                <form th:action="@{/books/admin/delete/{id}(id=${book.id})}" method="post" onsubmit="return confirm('确定要删除这本书吗？');">
                                    <button type="submit" class="btn btn-sm btn-outline-danger">
                                        <i class="fas fa-trash"></i> 删除
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 无图书提示 -->
            <div th:if="${#lists.isEmpty(books)}" class="alert alert-info mt-3">
                没有找到符合条件的图书。
            </div>
            
            <!-- 分页 -->
            <nav th:if="${totalPages > 1}" class="mt-4">
                <ul class="pagination justify-content-center">
                    <li class="page-item" th:classappend="${currentPage == 0} ? 'disabled' : ''">
                        <a class="page-link" th:href="@{/books/list(page=${currentPage - 1})}" aria-label="上一页">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item" th:each="i : ${#numbers.sequence(0, totalPages - 1)}" 
                        th:classappend="${currentPage == i} ? 'active' : ''">
                        <a class="page-link" th:href="@{/books/list(page=${i})}" th:text="${i + 1}">1</a>
                    </li>
                    <li class="page-item" th:classappend="${currentPage == totalPages - 1} ? 'disabled' : ''">
                        <a class="page-link" th:href="@{/books/list(page=${currentPage + 1})}" aria-label="下一页">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
            
            <!-- 添加图书按钮 (仅管理员可见) -->
            <div class="mt-4 text-center" sec:authorize="hasRole('ADMIN')">
                <a th:href="@{/books/admin/add}" class="btn btn-primary">
                    <i class="fas fa-plus"></i> 添加新图书
                </a>
            </div>
        </main>
    </div>
    
    <!-- 页脚 -->
    <footer th:replace="~{fragments/layout :: footer}"></footer>
    
    <!-- 脚本 -->
    <div th:replace="~{fragments/layout :: scripts}"></div>
</body>
</html>
